import React, { Suspense, useEffect, useRef, useState } from 'react';

const Earth = () => {
    const canvasRef = useRef(null);
    const [hue, setHue] = useState(217);
    const [stars, setStars] = useState([]);
  
    useEffect(() => {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      const w = canvas.width = window.innerWidth;
      const h = canvas.height = window.innerHeight;
  
      const canvas2 = document.createElement('canvas');
      const ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      const half = canvas2.width / 2;
      const gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#CCC');
      gradient2.addColorStop(0.1, `hsl(${hue}, 61%, 33%)`);
      gradient2.addColorStop(0.25, `hsl(${hue}, 64%, 6%)`);
      gradient2.addColorStop(1, 'transparent');
  
      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();
  
      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }
  
        if (min > max) {
          const hold = max;
          max = min;
          min = hold;
        }
  
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
  
      function maxOrbit(x, y) {
        const max = Math.max(x, y);
        const diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
      }
  
      const Star = () => {
        const orbitRadius = random(maxOrbit(w, h));
        const radius = random(60, orbitRadius) / 18;
        const orbitX = w / 2;
        const orbitY = h / 2;
        const timePassed = random(0, maxStars);
        const speed = random(orbitRadius) / 500000;
        const alpha = random(2, 10) / 10;
  
        const draw = () => {
          const x = Math.sin(timePassed) * orbitRadius + orbitX;
          const y = Math.cos(timePassed) * orbitRadius + orbitY;
          const twinkle = random(10);
  
          if (twinkle === 1 && alpha > 0) {
            alpha -= 0.05;
          } else if (twinkle === 2 && alpha < 1) {
            alpha += 0.05;
          }
  
          ctx.globalAlpha = alpha;
          ctx.drawImage(canvas2, x - radius / 2, y - radius / 2, radius, radius);
          timePassed += speed;
        };
  
        return { draw, alpha };
      };
  
      const maxStars = 2500;
      for (let i = 0; i < maxStars; i++) {
        const star = Star();
        setStars((prevStars) => [...prevStars, star]);
      }
  
      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5;
        ctx.fillStyle = `hsla(${hue}, 64%, 6%, 2)`;
        ctx.fillRect(0, 0, w, h);
  
        ctx.globalCompositeOperation = 'lighter';
        stars.forEach((star) => {
          star.draw();
        });
  
        window.requestAnimationFrame(animation);
      }
  
      animation();
  
      window.addEventListener('resize', () => {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
      });
  
      return () => {
        window.removeEventListener('resize', () => {});
      };
    }, [hue]);
  return (
    <canvas style={{position:"fixed",top:"0",left:"0",width:"100%",height:"100%"}} ref={canvasRef}></canvas>
  );
};

export default Earth;
